// // 1. 获取文章类型
// function loadCategory() {
//     getCategoryAPI({}, res => {
//         var { data: arr } = res.data;
//         // 铺设下拉菜单
//         // 默认显示个所有分类
//         $(".layui-form select[name=cate_id]")
//         arr.forEach(obj => {
//             var theOption = `<option value="${obj['Id']}">${obj['name']}</option>`;
//             $(".layui-form select[name=cate_id]").append(theOption);
//             // 这里要注意layui的标签, 要让layui重新监测下里面的option才会渲染出来
//             layui.form.render();
//         })


//         getId();
//     })
// }
// loadCategory();

// var id;
// // 2. 初始化裁剪插件
// var cropper;
// function initCropper() {
//     // 初始化裁剪插件
//     cropper = new Cropper($("#image")[0], {
//         aspectRatio: 1, // 裁剪图层的横纵比例
//         preview: $(".img-preview") // 多看文档里每个属性的意思, 一般都会有, 实在没用自己写/换个插件
//     });
//     // 上传图片 - 点击事件
//     $(".select").on("click", () => {
//         // JS触发一次file的点击事件 -弹出选择文件窗口
//         $("#file").click();
//     })

//     // 监测 - 文件选择器的变化
//     $("#file").on("change", ev => {
//         // 取到选择的一个文件
//         var [file] = ev.target.files;
//         // URL是JS内置对象 - 用于做前端图片 - 本地预览的(无需后台)
//         // File对象是一种特殊的Blob类型(Blob 对象表示一个不可变、原始数据的类文件对象。它的数据可以按文本或二进制的格式进行读取)
//         // 使用 Blob 创建一个指向类型化数组的URL - 有了url才能用在img的src上
//         var imgUrl = URL.createObjectURL(file);
//         // 替换拆剪区域图片
//         cropper.replace(imgUrl)
//     })
// }
// initCropper();

// // 3. assets/lib/tinymce/tinymce_setup.js里, 封装好了, 富文本编辑器启动的方法initEditor, 直接调用即可初始化(跳过去看看代码)
// initEditor();

// // 4. 监测提交
// $(".layui-form").on("submit", function (ev) {
//     ev.preventDefault();

//     // FormData格式
//     var fd = new FormData($(".layui-form")[0]);
//     // 遍历：可以看到内部已经添加什么数据？
//     // fd.forEach(function (val, key) {
//     //     console.log(val, key);
//     // })
//     // 富文本有名，没有值；需要重新设置下！查文档找如何获取内容！
//     fd.set("content", tinyMCE.editors[0].getContent());

//     // canvas标签
//     // 把裁剪的图片 - 转成base64字符串
//     const canvas = cropper.getCroppedCanvas({
//         width: 100,
//         height: 100
//     });
//     canvas.toBlob(function (file) {
//         fd.append("cover_img", file);

//         if (id) { // 修改
//             fd.append("Id", id);
//             updateArticleAPI(fd, () => {
//                 // 修改成功 - 回到文章页面
//                 window.location.href = "../list/list.html";
//             })
//         } else { // 新增
//             sendArticleAPI(fd, () => {
//                 // 发布成功 - 回到首页
//                 window.location.href = "../list/list.html";
//             });
//         }


//     }); // canvas标签 转Blob类型的文件
// })


// // 5. 从url上获取id, 如果获取不到代表是要新发布的
// function getId() {
//     var str = window.location.search; // ?id=13
//     id = str.slice(4); // 13
//     if (id) { // 如果有id, 再请求
//         getArticleByIdAPI({ id }, res => {
//             form.val("edit", res.data.data);
//             // 图片需要单独设置
//             // console.log(res.data.data.cover_img);
//             // $("#image").attr("src", res.data.data.cover_img);
//             cropper.replace(res.data.data.cover_img)
//         })
//     }
// }

//1因为这个 页面可能是点击发布过来的 / 点击编辑按钮 过来的
// 如果是点击编辑按钮, url上?后面会有id的参数
let argStr = location.search;
let id = argStr.substr(4);
if (id) {
    chawenAPI(id, res => {
        layui.form.val('edit', res.data.data);
        layui.form.render('select', 'edit');
        cropper.replace(res.data.data.cover_img);
    })
}
//2
cateListAPI({}, res => {
    let arr = res.data.data;
    arr.forEach(obj => {
        var theOption = ` <option value="${obj.Id}" lay-verify="cate">${obj.name}</option>
`;
        $('select[name = cate_id]').append(theOption);
        layui.form.render('select', 'edit');
    })
})

//2、集成富文本编辑器
function initTinyMce() {
    tinymce.init({
        selector: 'textarea[name=content]', //容器，可使用css选择器
        language: 'zh_CN', //调用放在langs文件夹内的语言包
        // toolbar: false, //隐藏工具栏
        // menubar: false, //隐藏菜单栏
        // inline: true, //开启内联模式
        plugins: ['link', 'table', 'image'], //选择需加载的插件
        //选中时出现的快捷工具，与插件有依赖关系
        // quickbars_selection_toolbar: 'bold italic forecolor | link blockquote quickimage',
    });
}
initTinyMce();
//3、封面图片cropper
let cropper;
function initCropper() {
    const image = document.getElementById('image');
    cropper = new Cropper(image, {
        aspectRatio: 1,
        crop(event) {
            console.log(event.detail.x);
            console.log(event.detail.y);
            console.log(event.detail.width);
            console.log(event.detail.height);
            console.log(event.detail.rotate);
            console.log(event.detail.scaleX);
            console.log(event.detail.scaleY);
        },
        preview: $('.img-preview')
    });

    //上传文件
    $('.select').on('click', e => {
        $('#file').click();
    })
    //新窗口出现
    $('#file').on('change', function (e) {
        var url = URL.createObjectURL(this.files[0]);
        cropper.replace(url)
    })
}
initCropper();

//4、发布文章 - 表单 - 提交事件
$('.layui-form').on('submit', e => {
    e.preventDefault();

    var htmlStr = tinyMCE.activeEditor.getContent();
    var canvas = cropper.getCroppedCanvas({
        width: 100,
        height: 100
    });

    let fd = new FormData($('.layui-form')[0]);
    fd.set('content', htmlStr);

    canvas.toBlob(function (blobObj) {
        fd.append('cover_img', blobObj);

        // 
        if (id) {
            fd.append('Id', id);
            updateArtAPI(fd, res => {
                setTimeout(() => {
                    window.location.href = '../list/list.html';
                }, 1500)
            })
        }
        //5、调用后台 
        addArtAPI(fd, res => {
            setTimeout(() => {
                window.location.href = '../list/list.html';
            }, 1500)

        })
    })
})